<template>
  <div class="workcalendar">
    <div class="title">工作日历</div>
    <div class="select">
      <el-select v-model="year" placeholder="请选择" @change="changeDate">
        <el-option
          v-for="item in yearsList"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select v-model="month" placeholder="请选择" @change="changeDate">
        <el-option v-for="item in 12" :key="item" :label="item" :value="item" />
      </el-select>
    </div>
    <!-- 日历组件 -->
    <el-calendar v-model="value">
      <!-- data：就是日历中的日期 -->
      <template slot="dateCell" slot-scope="{ date }">
        <!-- 需求：如果是周末，应该将休显示 isWeek 返回 false -->
        <!-- 需求：如果不是周末，应该将休隐藏 isWeek 返回 true -->
        <div class="mydate">
          {{ date.getDate() }}
          <span class="xiu" :class="{ hidden: isWeek(date) }">休</span>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  props: {
    mydate: {
      // 指定类型
      type: Date,
      // 设置默认值
      default: function() {
        return new Date()
      }
    }
  },
  data() {
    return {
      // 选择框中的年
      year: '',
      // 选择框中的月
      month: '',
      // 日历组件中的时间
      value: '',
      // 年份的数组
      yearsList: []
    }
  },
  // 侦听 mydate 提取出年 & 月
  watch: {
    mydate: {
      handler: function() {
        // 提取年&月
        // 得到时间
        const currentTime = new Date(this.mydate)
        // 提取年
        const _year = currentTime.getFullYear()
        // 提取月
        const _month = currentTime.getMonth() + 1
        // 保存年月
        this.year = _year
        this.month = _month
        // 动态生成年份的数组（年份：在当前年份的基础上向前多5年，向后多5年）
        for (let i = _year - 5; i <= _year + 5; i++) {
          this.yearsList.push(i)
        }
      },
      immediate: true
    }
  },
  methods: {
    // 当修改选择框中的年月之后，我们需要得到一个新的时间，在日历中显示
    changeDate() {
      // 一个新的时间需要：年(this.year) & 月(this.month) & 日(1)
      const newTime = new Date(`${this.year}/${this.month}/1`)
      this.value = newTime
    },
    // 判断当前日期是否是周期
    //  如果是周末返回 false， 如果是工作日返回 true
    isWeek(date) {
      // 得到当前日期
      const time = new Date(date)
      // 得到星期（星期六&星期日时，返回 false ，其它情况返回  true）
      // getDay: 0 ~ 6 （0 -> 日  1 -> 一 .... 6 -> 六）
      const day = time.getDay()
      if (day === 0 || day === 6) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss">
.workcalendar {
  .title {
    border-bottom: 1px solid #ccc;
    line-height: 40px;
  }
  .select {
    margin-top: 25px;
    text-align: right;
    input.el-input__inner {
      width: 100px;
      line-height: 30px;
      height: 30px;
      margin-left: 10px;
    }
    i.el-select__caret.el-input__icon.el-icon-arrow-up {
      line-height: 30px;
    }
  }
  .el-calendar__header {
    display: none;
  }
  .el-calendar-table {
    thead {
      th {
        font-weight: 700;
        &:nth-child(6),
        &:nth-child(7) {
          color: #fa7c4d;
        }
      }
    }
    td.current,
    td.prev,
    td.next {
      border: none;
    }
    .el-calendar-day {
      height: 40px !important;
      text-align: center;
    }
    tbody {
      tr:nth-child(6) {
        display: none;
      }
    }
  }
  .mydate {
    display: flex;
    align-items: center;
    justify-content: center;
    .hidden {
      display: none;
    }
    .xiu {
      width: 20px;
      height: 20px;
      background-color: #fa7c4d;
      color: #fff;
      border-radius: 50%;
      font-size: 12px;
      line-height: 20px;
      margin-left: 5px;
    }
  }
}
</style>
